$(function () {
  // 底部canvas
  var canvas = document.getElementById("lineCanvas");
  var body = $("body");
  canvas.width = body.width();
  canvas.height = body.height();
  var ctx = canvas.getContext("2d");

  var pageData = [];
  var companyDetail = {};
  var mouseInfo = { x: 0, y: 0 };
  // 获取分页数据时每次获取多少条
  var pageSize = 500;
  // 地区bubble对应class
  var regionMap = {
    CENTER: "center",
    NORTH: "north",
    SOUTH: "south",
    WEST: "west",
    EAST: "east",
    WEST_NORTH: "west-north",
    EAST_NORTH: "east-north",
    WEST_SOUTH: "west-south",
    EAST_SOUTH: "east-south",
  };
  // 地域对应的英文名称
  var regionNameMap = {
    中部区域: "CENTER",
    北部区域: "NORTH",
    南部区域: "SOUTH",
    西部区域: "WEST",
    东部区域: "EAST",
    西南区域: "WEST_NORTH",
    西北区域: "EAST_NORTH",
    东南区域: "WEST_SOUTH",
    东北区域: "EAST_SOUTH",
  };
  // 组装企业其他详细信息
  function getCompanyDetailInfoHtml() {
    var arr = [];
    arr.push(
      `<div class="detail-item"><span class="detail-label">全称：</span><span class="detail-value">${companyDetail.F0000001}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">简称：</span><span class="detail-value">${companyDetail.F0000002}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">类型：</span><span class="detail-value">${companyDetail.F0000017}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">等级：</span><span class="detail-value">${companyDetail.F0000016}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">负责人：</span><span class="detail-value">${companyDetail.F0000021}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">联系人：</span><span class="detail-value">${companyDetail.F0000005}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">联系电话：</span><span class="detail-value">${companyDetail.F0000006}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">2019年销量：</span><span class="detail-value">${companyDetail.F0000010}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">2020年销量：</span><span class="detail-value">${companyDetail.F0000011}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">2021年销量：</span><span class="detail-value">${companyDetail.F0000012}</span></div>`
    );
    arr.push(
      `<div class="detail-item"><span class="detail-label">2022年销量：</span><span class="detail-value">${companyDetail.F0000013}</span></div>`
    );
    return arr.join("");
  }
  // 组装企业信息数据
  function getCompanyListHtml(list, childNum = 0) {
    var companyArr = [];
    list.forEach(function (item) {
      companyArr.push(`
        <div class="company-item ${
          item.children ? "has-children" : ""
        }" style="margin-left: ${childNum * 20}px" data-item='${JSON.stringify(item)}'>
          ${item.F0000001}
        </div>
      `);
      if (item.children) {
        companyArr.push(getCompanyListHtml(item.children, childNum + 1));
      }
    });
    return companyArr.join("");
  }
  // 添加数据到页面中
  function getCompanyBubbleData(list, position) {
    return `
        <div class="company-list-bubble">
            <div class="bubble-${position}">
                <div class="bubble-content" id="${position}">
                    ${
                      getCompanyListHtml(list) ||
                      '<div style="padding:6px;color:#fff;font-size:12px;">无数据</div>'
                    }
                </div>
            </div>
        </div>
    `;
  }
  // 根据获取到的数据渲染网页
  function renderPageData() {
    var regionDataListMap = {
      CENTER: [],
      NORTH: [],
      SOUTH: [],
      WEST: [],
      EAST: [],
      WEST_NORTH: [],
      EAST_NORTH: [],
      WEST_SOUTH: [],
      EAST_SOUTH: [],
    };
    // 企业的信息，key是企业名称
    var companyMap = {};
    // 所有非一级企业
    var notFirstCompany = [];
    pageData.forEach((item) => {
      var engName = regionNameMap[item.F0000018];
      companyMap[item.F0000001] = item;
      if (!item.F0000020 && engName) {
        regionDataListMap[engName].push(item);
      } else if (item.F0000020) {
        notFirstCompany.push(item);
      }
    });
    // 把非一级企业放入相应的上级企业下
    notFirstCompany.forEach((item) => {
      var engName = regionNameMap[item.F0000018];
      if (companyMap[item.F0000020]) {
        companyMap[item.F0000020].children =
          companyMap[item.F0000020].children || [];
        companyMap[item.F0000020].children.push(item);
      }
    });
    var html = [];
    [
      "CENTER",
      "NORTH",
      "SOUTH",
      "WEST",
      "EAST",
      "WEST_NORTH",
      "EAST_NORTH",
      "WEST_SOUTH",
      "EAST_SOUTH",
    ].forEach((item) => {
      html.push(getCompanyBubbleData(regionDataListMap[item], regionMap[item]));
    });
    $("#root").prepend(html.join(""));
    setTimeout(() => {
      updateRegionBubbleLine();
      bindEvent();
    }, 100);
  }
  //   获取整个网页的数据
  function getPageData(FromRowNum, ToRowNum) {
    $.ajax({
      url: "/OpenApi/Invoke",
      type: "post",
      headers: {
        EngineCode: "gs2txufc5vcozenvj8zk10k92",
        EngineSecret:
          "TCUQ4Psy+H7y46MyZ0/dE4TNGVTikyAlAK4xdG4GytNRsulrORaV5Q==",
        "Content-Type": "application/json",
        Authorization: "",
      },
      data: JSON.stringify({
        ActionName: "LoadBizObjects",
        SchemaCode: "D104220Scgbxkjygyntfd40cp3bhsqs43",
        Filter: JSON.stringify({
          FromRowNum: FromRowNum,
          RequireCount: pageSize,
          ReturnItems: [],
          SortByCollection: [],
          ToRowNum: ToRowNum,
          Matcher: { Type: "And", Matchers: [] },
        }),
      }),
      success(res) {
        if (res.Successful) {
          if (res.ReturnData.BizObjectArray.length !== 0) {
            pageData.push(...res.ReturnData.BizObjectArray);
            if (res.ReturnData.BizObjectArray.length === pageSize) {
              getPageData(FromRowNum + pageSize, ToRowNum + pageSize);
            } else {
              renderPageData();
            }
          } else {
            renderPageData();
          }
        } else {
          getPageData(FromRowNum, ToRowNum);
        }
      },
      error() {},
    });
  }

  //   指定两个元素的中心点之间画线
  function drawLine(sourceId, targetId) {
    var source = $(`#${sourceId}`);
    var target = $(`#${targetId}`);
    var sourceOffset = source.offset();
    var targetOffset = target.offset();

    ctx.moveTo(
      sourceOffset.left + source.outerWidth() / 2,
      sourceOffset.top + source.outerHeight() / 2
    );

    ctx.lineTo(
      targetOffset.left + target.outerWidth() / 2,
      targetOffset.top + target.outerHeight() / 2
    );
  }

  // 更新集团和地区之间的线的位置
  function updateGroupRegionLine() {
    ctx.beginPath();
    ctx.strokeStyle = "#a4deee";
    drawLine("group", "regionCenter");
    drawLine("group", "regionNorth");
    drawLine("group", "regionSouth");
    drawLine("group", "regionWest");
    drawLine("group", "regionEast");
    drawLine("group", "regionWestNorth");
    drawLine("group", "regionEastNorth");
    drawLine("group", "regionWestSouth");
    drawLine("group", "regionEastSouth");
    ctx.stroke();
  }

  // 更新集团和地区之间的线的位置
  function updateRegionBubbleLine() {
    ctx.beginPath();
    ctx.strokeStyle = "#a4deee";
    drawLine("regionCenter", regionMap.CENTER);
    drawLine("regionNorth", regionMap.NORTH);
    drawLine("regionSouth", regionMap.SOUTH);
    drawLine("regionWest", regionMap.WEST);
    drawLine("regionEast", regionMap.EAST);
    drawLine("regionWestNorth", regionMap.WEST_NORTH);
    drawLine("regionEastNorth", regionMap.EAST_NORTH);
    drawLine("regionWestSouth", regionMap.WEST_SOUTH);
    drawLine("regionEastSouth", regionMap.EAST_SOUTH);
    ctx.stroke();
  }

  function bindEvent() {
    $(".company-item").hover(function (event) {
      companyDetail = $(this).data().item;
      var x = event.pageX;
      var y = event.pageY;
      mouseInfo = { x, y };
      if ($(".detail-info").css("display") !== "block") {
        $(".detail-info")
          .html(getCompanyDetailInfoHtml())
          .show()
          .css("top", `${y}px`)
          .css("left", `${x + 40}px`);
      }
    });
    $(".company-item").mouseleave(function () {
      $(".detail-info").hide();
    });
    $(window).on("resize", function () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      updateGroupRegionLine();
      updateRegionBubbleLine();
    });
    console.log(pageData);
  }

  getPageData(0, pageSize);
  updateGroupRegionLine();
});
